<template>
  <div>
    <!-- 头部 -->
    <Header></Header>
    <div class="container">
      <!-- 头部标题 -->
      <div class="header">
        <h1 class="title"><i class="el-icon-position"></i>房产经纪</h1>
      </div>
      <div class="content">
        <ul>
          <li v-for="item in agentsList" :key="item.id">
            <div class="agentsImg">
              <img :src="item.image" alt="" />
            </div>
            <div class="content">
              <h2>{{ item.name }}</h2>
              <p>{{ item.desc }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 尾部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import { getAgentsList } from "@/api/agents.js";
export default {
  components: { Header, Footer },
  data() {
    return {
      agentsList: [],
    };
  },
  created() {
    this.getAgentsList();
  },
  methods: {
    async getAgentsList() {
      const res = await getAgentsList();
      this.agentsList = res.data;
      // console.log('this.agentsList: ', this.agentsList);
      // console.log('res: ', res);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 0 30px 30px 30px;
  width: 1000px;
  margin: 0 auto;
  .header {
    .title {
      font-size: 18px;
      color: orange;
      i {
        font-size: 20px;
        // color: orange;
        margin-right: 5px;
      }
    }
  }
  .content {
    padding: 10px;
    li {
      list-style: none;
      width: 100%;
      margin-right: 50px;
      height: 200px;
      // background-color: yellow;
      display: flex;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 30px;
      .agentsImg {
        width: 300px;
        // background-color: purple;
        text-align: center;
        border-right: 1px solid #ccc;
        img {
          width: 200px;
          height: 200px;
          object-fit: cover;
          border-radius: 50%;
        }
      }
      .content {
        text-align: center;
        flex: 1;
        // background-color: green;
      }
    }
  }
}
</style>